<template>
	<view class="details" :style="{backgroundColor:bg}">
		<view class="video">
			<video autoplay=true :src="details.vd" controls></video>
		</view>
		<view class="msg">
			<view class="img">
				<image :src="details.img" mode=""></image>
			</view>
			<view class="content">
				<view class="name">{{details.nm}}</view>
				<view class="cat">{{details.cat}}</view>
				<view class="star">{{details.dir}}/{{details.star}}</view>
				<view class="info">{{details.pubDesc}}/{{details.dur}}分钟</view>
			</view>
			<uni-fav class="fav" :checked="favChecked" @click="onFav" />
		</view>
		<view class="rating">
			<view class="desc">
				<view class="title">猫眼评分</view>
				<view class="wish">{{details.wish}}想看 {{details.watched}}看过</view>
			</view>
			<view class="sc">
				<view class="sc1">
					<view class="sc2">{{details.sc}}分</view>
					<view class="comment">{{details.snum}}评分</view>
				</view>
				<view class="start">
					<view v-if="details.distributions">
						<view>☆☆☆☆☆{{details.distributions[0].proportion}}%</view>
						<view>☆☆☆{{details.distributions[1].proportion}}%</view>
						<view>☆{{details.distributions[2].proportion}}%</view>
					</view>
				</view>
			</view>
		</view>
		<view class="swiper">
			<view class="title">电影海报</view>
			<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="item,index in details.photos" :key="index">
					<view class="swiper-item">
						<image :src="item" mode="aspectFill"></image>
					</view>
				</swiper-item>

			</swiper>
		</view>
		<view class="intro">
			<view class="title">简介</view>
			<view class="msg">{{details.dra}}</view>
		</view>
		<view class="show">
			<button type="default" @tap="show(details.shareInfo.url)">去猫眼看看</button>
		</view>
		<uni-popup ref="popup"  >
			<uni-popup-dialog @confirm="comfirmLogin" :showClose="false" confirmText="确定" title="请登录后收藏电影"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {
		onLoad,
		onReachBottom
	} from "@dcloudio/uni-app"
	import {
		ref,
		reactive,
		computed
	} from "vue"
	import {
		userStore
	} from "../../store/userStore"
	import { CONFIG } from "../../utils/config"
	let store = userStore()
	let movieId = 0
	onLoad((params) => {
		movieId = params.movieId
		console.log(typeof(movieId))
		getDetails(movieId)
		// 如果登录,显示收藏状态
		if (store.isLogin) {
			showFav(movieId)
		}
	})
	const details = ref({})
	const bg = ref("")
	async function getDetails(movieId) {
		let res = await uni.$get("https://m.maoyan.com/ajax/detailmovie", {
			movieId
		})
		details.value = res.data.detailMovie
		console.log(details.value)
		// 设计导航栏背景色
		uni.setNavigationBarColor({
			frontColor: "#ffffff", // 导航栏标题颜色，只能是'black'或'white'
			backgroundColor: details.value.backgroundColor // 导航栏背景颜色
		});
		// 获取页面背景色
		bg.value = res.data.detailMovie.backgroundColor
		// 设计导航栏标题
		uni.setNavigationBarTitle({
			title: details.value.nm
		})

	}

	function comfirmLogin() {
		uni.navigateTo({
			url: "/pages/login/login"
		})
	}


	const favChecked = ref(false)
	const popup = ref(null)
	const unico = uniCloud.importObject("movieOper")
	async function showFav(movieid) {


		let {
			count
		} = await unico.hasFav(movieid)

		console.log("count=" + count);
		favChecked.value = (count == 1)

	}
	async function onFav() {
		if (!store.isLogin) {
			popup.value.open()

		} else {
             if(!favChecked.value)
			 {
				 uni.$post(CONFIG.leanbase+"/1.1/movieFav",{
					 
				 })
			 }
		}
	}
</script>

<style scoped lang="scss">
	.details {
		video {
			width: 100%;
		}

		.msg {
			display: flex;
			margin: 10rpx;
			position: relative;

			.img {
				width: 200rpx;
				height: 240rpx;

				image {
					width: 100%;
					height: 100%;
				}
			}

			.content {
				width: 650rpx;
				margin-left: 10px;
				display: flex;
				justify-content: space-around;
				flex-direction: column;

				.name {
					color: #fff;
					font-size: 35rpx;
				}

				.cat,
				.star,
				.info {
					color: #ccc;
					font-size: 26rpx;
				}
			}

			.fav {
				position: absolute;
				top: 10px;
				right: 10px;
			}
		}

		.rating {
			border: 1px solid #fff;
			background-color: rgba(0, 0, 0, 0.2);
			margin: 15px;
			border-radius: 10px;
			padding: 10px;

			.desc {
				display: flex;
				justify-content: space-between;

				.title {
					font-size: 35rpx;
					color: #fff;
				}

				.wish {
					color: #eee;
				}
			}

			.sc {
				display: flex;
				justify-content: space-around;
				height: 80px;
				align-items: center;

				.sc1 {
					.sc2 {

						font-size: 30px;
						color: gold;
					}

					.comment {
						color: #eee;
					}
				}

				.start {
					color: gold;
					text-align: right;
				}

			}

		}

		.intro {
			margin: 10px;
			color: #ccc;

			.title {
				color: #fff;
				font-weight: bold;
			}

		}

		.swiper {
			.title {
				margin: 10px;
				color: #fff;
			}

			swiper {
				height: 200px;

				image {
					width: 100%;
				}
			}
		}

		.show {
			color: #fff;
			height: 100px;
			margin: 10px;

		}
	}
</style>